<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* #canvas {
            width: 100vw;
            height: 100vh;
            display: block;
        } */
    </style>
</head>
<body>
    <canvas id="canvas" width="640" height="480" style="border: 1px solid #000;"></canvas>

    <script>
         /** @type {HTMLCanvasElement} */   
        const canvas=document.querySelector('#canvas')
        // canvas.width=canvas.clientWidth;
        // canvas.height=canvas.clientHeight;

        const gl=canvas.getContext('webgl')

        const vertexShaderSource=`
            attribute vec2 a_position;
            varying vec4 v_color;
            uniform vec2 u_resolution;
            
            void main(){
                gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);  
                v_color = gl_Position * 0.5 + 0.5;
            }
        `

        const fragmentShaderSource=`
            precision mediump float;
            varying vec4 v_color;
            void main(){
                gl_FragColor = v_color;
            }
        `

        function createShader(gl, type, source){
            const shader = gl.createShader(type)
            gl.shaderSource(shader, source)
            gl.compileShader(shader)

            let success= gl.getShaderParameter(shader, gl.COMPILE_STATUS)
            if(success){
                return shader
            }
            // gl.deleteShader(shader);
        }

        let vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource)
        let fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource)

        function createProgram(gl, vertexShader, fragmentShader){
            let program=gl.createProgram();
            gl.attachShader(program, vertexShader)
            gl.attachShader(program, fragmentShader)
            gl.linkProgram(program)
            let success = gl.getProgramParameter(program, gl.LINK_STATUS);
            if (success) {
                return program;
            }
        }

        let program = createProgram(gl, vertexShader, fragmentShader);

        const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
        const resolutionUniformLocation = gl.getUniformLocation(program, "u_resolution");

        let positionBuffer = gl.createBuffer();

        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

        //这东西最终会是两个一样的三角形拼成的一个长方形
        // let positions = [
        //     10, 20,
        //     80, 20,
        //     10, 30,
        //     10, 30,
        //     80, 20,
        //     80, 30,
        // ]
        let positions = [
             0, -100,
           150,  125,
          -175,  100]

        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW)

        gl.clearColor(0,0,0,0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.useProgram(program)
        // 设置全局变量 分辨率
        gl.uniform2f(resolutionUniformLocation, gl.canvas.width, gl.canvas.height);

        gl.enableVertexAttribArray(positionAttributeLocation)

        // 将绑定点绑定到缓冲数据（positionBuffer）
        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
        
        // 告诉属性怎么从positionBuffer中读取数据 (ARRAY_BUFFER)
        var size = 2;          // 每次迭代运行提取两个单位数据
        var type = gl.FLOAT;   // 每个单位的数据类型是32位浮点型
        var normalize = false; // 不需要归一化数据
        var stride = 0;        // 0 = 移动单位数量 * 每个单位占用内存（sizeof(type)）
                                // 每次迭代运行运动多少内存到下一个数据开始点
        var offset = 0;        // 从缓冲起始位置开始读取
        gl.vertexAttribPointer(positionAttributeLocation, size, type, normalize, stride, offset)

        var primitiveType = gl.TRIANGLES;
        var offset = 0;
        var count = 3;
        gl.drawArrays(primitiveType, offset, count);
    </script>
</body>
</html>